【原创】基于phpGrace+uniApp开发之：5.登录界面增加图片验证码 |
您所在的位置：网站首页 › phpgrace verifycodephp › 【原创】基于phpGrace+uniApp开发之：5.登录界面增加图片验证码 |
|
1.目的： 采用phpGrace中的图片验证码，在用户名+密码登录时使用图片验证码进行验证。 2.文档地址： 图片验证码的文档地址：http://www.phpgrace.com/tools/info/5.html 3.代码文件放置： 将下载verifyCode.php的文件，放入grace/tools文件夹中即可，该文件主要是产生图片验证码，并且写入到session中。 4.访问地址方法： 将客户端访问的方法放在app/index控制器中，代码如下： //绘制验证码 public function vcode(){ //绘制验证码 /* * verifyCode 参数 * 1、图片宽度 * 2、图片高度 * 3、字符总数 * 4、包含数字的数量 * 5、字体【可省参数 默认：AMBROSIA.ttf，如需更换请将字体文件部署到 phpGrace/fonts 文件夹下】 */ $vcode = new phpGrace\tools\verifyCode(88, 32, 4, 1); /* * 可修改属性 $vcode->bgcolor = array(255, 0, 0); //验证码背景颜色 $vcode->codeColor = array(0, 255, 0); //验证码文本颜色 $vcode->fontSize = 30; //验证码文字大小 $vcode->noise = false; //是否绘制干扰字符 $vcode->noiseNumber = 10; //干扰字符数量 $vcode->sessionName = 'yourname'; //保存验证码的 session 名称 */ //绘制验证码 $vcode->draw(); } 该代码放入后，客户端访问该地址为： http:// 域名或IP地址 /index/vcode ，通过该地址，可得到图片验证码。 5.视图： 在uniApp中添加验证码输入和显示功能。由于uniApp是基于Vue的视图架构，所以该代码如下： 验证码： 网站的源程序是基于HTML的，代码如下： 验证码 :在Vue中要注意的事数值的绑定，用“yzm”绑定输入的验证码，用yzmimg绑定图片的连接地址。 同时这里的点击也和js代码有所区别。Vue中的事件，需要写在methods代码块中。 所以这里的代码综合如下： data模块中： data() { return { yzm: '', yzmimg:this.apiServer+'index/vcode/', } },methods: methods: { changeVcode(){ this.yzmimg =this.apiServer+'index/vcode/' + Math.random(); },6.服务器端验证： 注意：在客户端发送验证码到后台后，后台在验证时，需要打开Session才行，即增加如下语句：session_start(); 如果不加该语句，将会使得服务器端在下面代码验证时无法获取session中的值。 function checkYZM(){ //在验证时，需要加入session_start开启session，否则拿不到session值！！！ session_start(); //必须要加该语句，phpgrace的说明中没写，导致验证失败。 //提交比对 if(PG_POST){ //比对验证码 if($_POST['yzm'] != getSession('pgVcode')){ exit(jsonCode('vcodeerror', '验证码错误！')); } // else{ // exit(jsonCode('ok', '验证码正确！')); // } } }; 7.客户端反馈结果： 客户端部分代码如下： success:res=>{ var info = res.data; //首先进行验证码的验证 if(info.status=='vcodeerror'){ uni.showToast({ title:'验证码错误，请重试！', icon:'none', }) return; } } 总结： 本次基于phpGrace的后台框架，添加了官方提供的图形验证码代码。由于需要将其迁移到基于Vue的视图框架中，又是第一次写这样的代码，花了近一天的时间才完全的搞定，走了不少弯路，在这里写出来，也给要用的朋友一点参考或建议。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |